<template>
  <div class="container-sex" style="position: relative">
    <div class="top">
      <p class="title">出行数据统计</p>
      <span class="deco"></span>
    </div>
    <div class="data" ref="dataRef" style="width: 100%; height: 200px"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const dataRef = ref();
onMounted(() => {
  let mychart = echarts.init(dataRef.value);
  var img =
    "";

  var trafficWay = [
    {
      name: "火车",
      value: 20,
    },
    {
      name: "飞机",
      value: 10,
    },
    {
      name: "客车",
      value: 30,
    },
    {
      name: "轮渡",
      value: 40,
    },
  ];

  var data = [];
  var color = [
    "#00ffff",
    "#00cfff",
    "#006ced",
    "#ffe000",
    "#ffa800",
    "#ff5b00",
    "#ff3000",
  ];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  var seriesOption = [
    {
      name: "",
      type: "pie",
      clockWise: false,
      radius: [80, 70],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: false,
            position: "outside",
            color: "#ddd",
            formatter: function (params) {
              var percent = 0;
              var total = 0;
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                return (
                  "交通方式：" +
                  params.name +
                  "\n" +
                  "\n" +
                  "占百分比：" +
                  percent +
                  "%"
                );
              } else {
                return "";
              }
            },
          },
          labelLine: {
            length: 30,
            length2: 100,
            show: true,
            color: "#00ffff",
          },
        },
      },
      data: data,
    },
  ];
  const option = {
    color: color,
    title: {
        text: '交通方式',
        top: '42%',
        textAlign: "center",
        left: "49%",
        textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: '400'
        }
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 178,
            height: 178,
          },
          left: "center",
          top: "center",
          position: [100, 100],
        },
      ],
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
    },
    tooltip: {
      show: false,
    },
    legend: {
      icon: "circle",
      orient: "horizontal",
      // x: 'left',
      data: ["火车", "飞机", "客车", "轮渡"],
      right: 360,
      bottom: 30,
      align: "right",
      textStyle: {
        color: "#fff",
      },
      itemGap: 20,
    },
    toolbox: {
      show: false,
    },
    series: seriesOption,
  };
  mychart.setOption(option);
});
</script>

<style lang="scss" scoped>
.container-sex {
  margin: 10px 0px 0px 20px;
  background: url(../../images/dataScreen-main-rb.png) no-repeat;
  background-size: 100% 100%;
  // border: 1px solid cadetblue;
  .top {
    position: relative;
    // border: 1px solid red;
    height: 60px;
    .title {
      color: white;
      font-size: 20px;
    }
    .deco {
      background: url(../../images/dataScreen-title.png);
      display: inline-block;
      width: 68px;
      height: 7px;
    }
  }
}
</style>
